<div class="row">
	<h3>TODO</h3>
</div>

<div class="row">
	<input class="form-control" type="text" data-bind="value: newTodo, valueUpdate: 'afterkeydown', event: { keypress: saveTodo}" placeholder="Type new TODO, hit Enter to save"/>
</div>

<div class="row" data-bind="foreach: todos">
	<input class="col-md-2" type="checkbox" data-bind="checked: completed"/>
	<p data-bind="text: description(), css: { completed: completed() } "></p>
	<hr>
</div>

<div class="row">
	<br>
	<a class="btn btn-primary" data-bind="click: clearCompleted">Clear completed</a>
</div>

<script>
    var app = new TodoApp();
    ko.applyBindings(app);
</script>